<template>
  <div class="page-view">
    <div class="word-cloud">
      <img src="@/assets/img/wordCloud.png" />
    </div>
    <div class="tab-text">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="最新政策" name="first">
          <ul class="policy-list">
            <li v-for="item in policyList" :key="item">
                <p class="policy-list-left">{{item.content}}</p>
                <p>{{item.publishDate}}</p>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="智库热榜" name="second">
          <ul class="policy-list">
            <li v-for="item in hotList" :key="item">
                <p class="policy-list-left">{{item.title}}</p>
                <p>{{item.publishDate}}</p>
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import http from "@/utils/http.js"
export default {
  data() {
    return {
      activeName: "first",
      policyList:[],
      hotList: []
    };
  },
  created(){
    this.getLatestPolicy(),
    this.getHotList()
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    async getLatestPolicy(){
      const res =await http.getLatestPolicy()
      console.log(res.data.data.data)
      if(res.data){
        this.policyList = res.data.data || []
        console.log(res.data.data)
      }
    },
    async getHotList(){
      const res =await http.getHotList()
      if(res.data){ 
        this.hotList = res.data.data || []
      }
    },
  },
};
</script>
<style lang="scss">
.page-view {
  height: 410px;
  width: 100%;
  display: flex;
  background-color: #f3f8fb;
  margin-top: 50px;
  .word-cloud {
    width: 50%;
    img {
      height: 410px;
      width: 100%;
    }
  }
}

.tab-text {
    margin-top: 20px;
    width: 40%;
}
.el-tabs__item {
    font-size: 20px!important;
}

.policy-list {
  color: #333333FF;
  font-size: 16px;
  li {
    line-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: disc;
    cursor: pointer;
    p {
      width: 100px;
      text-align: right;
    }
    >p:first-child {
      text-align: left;
      flex: 1;
      margin-right: 20px;
      white-space:nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .policy-list-left {
      padding-left: 10px;
      position: relative;
      &::before{
        content: ".";
        height: 100%;
        position: absolute;
        left: 2px;
        top: -4px;
      }
    }
  }
}
</style>